﻿<UserControl x:Class="CodeAbility.MonitorAndCommand.Windows8Monitor.UserControls.DeviceDataUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:converters="using:CodeAbility.MonitorAndCommand.Windows8Monitor.Converters"
             mc:Ignorable="d" 
             d:DesignHeight="60" d:DesignWidth="600">
    
    <UserControl.Resources>

        <converters:BooleanToOpacityConverter x:Key="BooleanToOpacity"/>
        <converters:BooleanToConnectionStateColorConverter x:Key="BooleanToConnectionStateColor"/>
        
        <Style x:Key="DeviceStyle" TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="5"/>
            <Setter Property="FontSize" Value="40"/>
            <Setter Property="Foreground" Value="White"/>
        </Style>
        <Style x:Key="MessageIndicatorStyle" TargetType="Rectangle">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="2"></Setter>
            <Setter Property="Width" Value="38"></Setter>
            <Setter Property="Height" Value="38"></Setter>
        </Style>
        <Style x:Key="EllipseStyle" TargetType="Ellipse">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Width" Value="50"/>
            <Setter Property="Height" Value="50"/>
            <Setter Property="Margin" Value="5"/>
            <Setter Property="Stroke" Value="White"/>
            <Setter Property="StrokeThickness" Value="2"/>
        </Style>

    </UserControl.Resources>
    
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="60"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="70"/>
            <ColumnDefinition Width="50"/>
            <ColumnDefinition Width="50"/>
            <ColumnDefinition Width="400"/>
        </Grid.ColumnDefinitions>

        <Ellipse Grid.Column="0"
                Fill="{Binding IsConnected, Converter={StaticResource BooleanToConnectionStateColor}}" 
                Style="{StaticResource EllipseStyle}"/>

        <Rectangle Grid.Column="1"
                        Style="{StaticResource MessageIndicatorStyle}"
                        Fill="LightSeaGreen" 
                        Opacity="{Binding MessageReceived, Converter={StaticResource BooleanToOpacity}, FallbackValue=0.25}">
        </Rectangle>
        <Rectangle Grid.Column="2"
                        Style="{StaticResource MessageIndicatorStyle}"
                        Fill="LightCyan" 
                        Opacity="{Binding MessageSent, Converter={StaticResource BooleanToOpacity}, FallbackValue=0.25}"/>

        <TextBlock Grid.Column="3" Text="{Binding Name}" Style="{StaticResource DeviceStyle}"></TextBlock>

    </Grid>
</UserControl>
